<route lang="json5" type="home">
{
  style: {
    navigationBarTitleText: '我的小组',
    navigationStyle: 'custom',
    // #ifdef MP-ALIPAY
    enablePullDownRefresh: false,
    'mp-alipay': {
      allowsBounceVertical: 'NO',
      transparentTitle: 'always',
      titlePenetrate: 'YES',
      defaultTitle: '',
    },
    // #endif
  },
}
</route>
<template>
  <JoinCustomNavbar />
  <scroll-view
    :scroll-top="scrollTop"
    :scroll-y="true"
    class="scroll-Y"
    refresher-enabled
    :refresher-triggered="isTriggered"
    @refresherrefresh="upper"
    @scrolltolower="lower"
  >
    <uni-card
      :title="item.groupName"
      :sub-title="'组长: ' + item.masterUserName"
      :extra="item.statusStr"
      :thumbnail="item.groupAvatar"
      v-for="item in list"
      :key="item.id"
    >
      <view class="options">
        <view class="options-description">
          <text>小组口号: {{ item.description }}</text>
        </view>
        <button
          v-if="item.status === 0"
          class="mini-btn"
          hover-class="button-active"
          size="mini"
          @tap="join(item)"
        >
          加入
        </button>
      </view>
    </uni-card>
    <uni-load-more
      v-if="list.length > 3"
      class="loading-text"
      :status="loadingStatus"
      :content-text="MORE_MSG_OBJ"
    />
  </scroll-view>
</template>

<script lang="ts" setup>
import { Group } from '@/types/group'
import JoinCustomNavbar from './components/JoinCustomNavbar.vue'
import { MORE_MSG_OBJ } from '@/store/contants'
import { useGroupStore } from '@/store/group'
import { groupListApi, joinApi } from '@/service/group'
import { useUserStore } from '@/store'
import { stringToObject } from '@/utils/stringUtil'
import { Scene } from '@/types/global'

// 数据
const list = ref<Group[]>([])
const groupRef = useGroupStore()
const userRef = useUserStore()

// 加入
const join = async (group) => {
  const joinRes = await joinApi({ groupId: group.id, memberId: userRef.userInfo.id })
  console.log(joinRes.data)
  if (joinRes.code === 0) {
    uni.navigateBack()
    uni.showToast({ icon: 'none', title: '已申请加入' })
  }
}

// 触发下拉刷新
const loadingStatus = ref()
const scrollTop = ref(0)
const isTriggered = ref(false)
// const guessRef = ref<GuessInstance>()
const upper = async () => {
  console.log('下拉刷新')
  isTriggered.value = true
  // 加载数据 api 要加 await
  const listRes = await groupListApi({ page: 1, size: 10 })
  list.value = listRes.data.records
  setInterval(() => {
    isTriggered.value = false
  }, 1000)
}
const lower = () => {
  console.log('lower')
  // guessRef.value?.getMore()
}

onLoad(async (req: any) => {
  // 解析二维码
  // console.log('init req', req.scene)
  // if (req.scene) {
  //   const scene = stringToObject(decodeURIComponent(req.scene))
  //   console.log('scene', scene)
  // }
  // 解析二维码
  if (req.scene) {
    const scene: Scene = stringToObject(decodeURIComponent(req.scene))
    console.log('scene', scene)
    const listRes = await groupListApi({ groupId: scene.id, page: 1, size: 10 })
    list.value = listRes.data.records
    return
  }
  const listRes = await groupListApi({ page: 1, size: 10 })
  console.log('list res:', listRes)

  list.value = listRes.data.records
})
</script>

<style lang="scss">
.options {
  position: relative;
  width: 100%;
  margin-bottom: 5rpx;

  .options-description {
    width: 60%;
    font-size: 28rpx;
    color: $main-color;
  }

  button {
    position: absolute;
    top: 0rpx;
    right: 0rpx;
    width: 20%;
    font-size: 25rpx;
    color: #fff;
    background-color: $main-color-hight;
  }
  .button-active {
    background-color: $main-color; /* 点击时的背景颜色 */
  }
}
.remarks {
  width: 70%;
  margin-left: 5%;
}

.scroll-Y {
  width: 100%;
  height: calc(100vh - var(--window-top));
}
</style>
